<template>
	<view class="invite-poster-content">
		<!-- TODO: 小程序端使用type='2d'会有报错 -->
		<canvas class="hideCanvas" canvas-id="self_canvas"
			:style="{ width: (poster.width || 1) + 'px', height: (poster.height || 1) + 'px' }"></canvas>
	</view>
</template>

<script>
	/**
	 * shopro-canvas  - canvas
	 * @property {Object} canvasParams - 自定义参数
	 * @property {Boolean} isAutoInit = [true] - 是否自动渲染canvas
	 */

	import _app from '@/shopro/poster/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from '@/shopro/poster/QS-SharePoster/QS-SharePoster.js';
	import tools from '@/shopro/poster/tools.js';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	let ctx = null;
	export default {
		components: {},
		data() {
			return {
				poster: {},
				canvasId: 'self_canvas'
			};
		},
		props: {
			canvasParams: {
				type: Object,
				default: () => {}
			},
			isAutoInit: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			...mapGetters(['initShare', 'userInfo'])
		},

		async mounted() {
			ctx = uni.createCanvasContext(this.canvasId, this);
			ctx && this.isAutoInit && this.shareFc();
		},
		methods: {
			async shareFc() {
				let that = this;
				_app.showLoading('绘制中...');
				let config = {};
				console.log(that.canvasParams)
				if (that.canvasParams.backgroundImage) {
					config = {
						backgroundImage: tools.checkImgHttp(that.canvasParams.backgroundImage, 'bgImage')
					};
				}
				if (that.canvasParams.background) {
					config = {
						background: {
							width: that.canvasParams.background?.width || 100,
							height: that.canvasParams.background?.height || 100,
							backgroundColor: that.canvasParams.background?.color || '#000'
						}
					};
				}

				try {
					_app.log('准备生成:' + new Date());
					const d = await getSharePoster({
						_this: that, //若在组件中使用 必传
						...config,
						posterCanvasId: that.canvasId, //canvasId
						Context: ctx,
						delayTimeScale: 10, //延时系数
						draw: false, //是否执行ctx.draw方法, 推荐false，自己去draw
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							let arr = tools.initDrawArray(bgObj, that.canvasParams.drawArray);
							return new Promise((rs, rj) => {
								rs(arr);
							});
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => {
							// 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					await that.drawPoster();
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},
			async drawPoster() {
				let that = this;
				ctx.draw(true, () => {
					setTimeout(() => {
						uni.canvasToTempFilePath({
								canvasId: that.canvasId,
								// fileType: 'jpg',
								success: res => {
									console.log(res)
									// let path = 'data:image/jpg;base64' + uni.arrayBufferToBase64(
									// 	res.tempFilePath)
									_app.hideLoading();
									that.$emit('success', res.tempFilePath);
									_app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + res
										.tempFilePath);
								},
								fail: err => {
									_app.hideLoading();
									console.log('生成异常', err);
								}
							},
							that
						);
					}, 1000)

				});
			}
		}
	};
</script>

<style lang="scss">
	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}
</style>
